<template>
  <div class="scene-container">
    <div class="scene-list">
      <div v-for="(item, index) in sceneList" :key="index"
           class="scene-list-item"
           @click="sceneChange(item, index)">
        {{ item.name }}
      </div>
    </div>
    <div class="handle-interval">
      <flexbox class="handle-button" @click="addScene">
        <i class="wk wk-manage handle-button-icon"/>
        <div class="handle-button-name">新建场景</div>
      </flexbox>
      <flexbox class="handle-button" @click="manageScene">
        <i class="wk wk-manage handle-button-icon"/>
        <div class="handle-button-name">管理场景</div>
      </flexbox>
    </div>
  </div>
</template>

<script setup>
import {computed} from "vue"
import {useErpUserStore} from "@/store/modules/usererp.js";


defineOptions({
  name: 'SceneList', // 客户管理下 重要提醒 回款计划提醒
})

const props = defineProps({
  sceneList: {
    type: Array
  }
})

const emits = defineEmits(['sceneChange', 'addScene', 'manageScene', 'hideSceneList'])

// 选择场景
function sceneChange(item, index) {
  emits('sceneChange', {
    id: item.sceneId,
    name: item.name,
    bydata: item.bydata
  })
  emits('hideSceneList')
}

// 添加场景
function addScene() {
  emits('addScene')
}

// 设置场景
function manageScene() {
  emits('manageScene')
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.scene-container {
  position: relative;
  width: 180px;
}

.scene-list {
  max-height: 240px;
  overflow-y: auto;
  font-size: 12px;
  margin-bottom: 10px;

  .scene-list-item {
    color: #333;
    padding: 10px 15px;
    cursor: pointer;
    background-color: white;
  }

  .scene-list-item:hover {
    background-color: #f7f8fa;
    color: #2362FB;
  }

  .scene-list-item-select {
    color: #2362FB;
    background-color: #f7f8fa;
  }
}

.handle-button {
  padding: 6px 20px;
  font-size: 12px;
  cursor: pointer;
  color: #2362FB;

  .handle-button-icon {
    margin-right: 8px;
    margin-top: 3px;
  }

  .handle-button-name {
    font-size: 12px;
  }
}

.handle-button:hover {
  .handle-button-name {
    text-decoration: underline;
  }
}

.handle-interval {
  border-top: 1px solid #EFEFEF;
}
</style>
